import React from "react";
import {LeftCircleOutlined} from '@ant-design/icons';

import detailCss from './movieDetail.module.css'
import request from '../utils/request'


class MovieDetail extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            isFixed: false,
            data:[]
        }
    }
    componentDidMount() {
        window.onscroll = () => {
          let scrollTop = document.documentElement.scrollTop
          if (scrollTop >= 50) {
            this.setState({ isFixed: true })
            // console.log(this.state)
          } else if(scrollTop < 50){
            this.setState({ isFixed: false })
          }
        }
       
        const urlParams = new URL(window.location.href);
        const id = urlParams.hash.slice(9)
        // GET /api/movies/:id
        request.get('/movies/'+id).then(({ data }) => {
            console.log('data', data)
            this.setState({data:data.data})
        })
    }   

    // componentWillUnmount() {
    //     EventEmitter.removeAllListeners();
    // }
    
    render(){
        const {data,isFixed} =this.state
        // 回退到上一页
        const goBackPage = () => {
            window.history.back()
        }
        return (
            <>
                <div>
                {
                    data.map(item=>{
                        return (
                        <div key={item.filmId}>
                            <div className={isFixed ? detailCss.showheader :detailCss.header}>
                                <a> <LeftCircleOutlined  className={detailCss.goback} onClick={goBackPage}/> </a>
                                <div className={detailCss.title}>{item.name}</div>
                            </div>
                            <div className={detailCss.poster}>
                                <img src={item.poster} className={detailCss.img}/>
                            </div>
                            <div className={detailCss.content}>
                               <h3>{item.name}</h3>
                               <p className={detailCss.text}>{item.category}</p>
                               <p className={detailCss.text}>{item.nation} | {item.runtime}分钟</p>
                               <p className={detailCss.p}>人类为抵御小行星的撞击，拯救地球，在月球部署了
                                   月盾计划。陨石提前来袭，全员紧急撤离时，维修工
                                   独孤月（沈腾 饰）因为意外，错过了领队马蓝星（马丽饰）
                                   的撤离通知，一个人落在了月球。人类为抵御小行星的撞击，拯救地球，在月球部署了
                                   月盾计划。陨石提前来袭，全员紧急撤离时，维修工
                                   独孤月（沈腾 饰）因为意外，错过了领队马蓝星（马丽饰）
                                   的撤离通知，一个人落在了月球。人类为抵御小行星的撞击，拯救地球，在月球部署了
                                   月盾计划。陨石提前来袭，全员紧急撤离时，维修工
                                   独孤月（沈腾 饰）因为意外，错过了领队马蓝星（马丽饰）
                                   的撤离通知，一个人落在了月球。人类为抵御小行星的撞击，拯救地球，在月球部署了
                                   月盾计划。陨石提前来袭，全员紧急撤离时，维修工
                                   独孤月（沈腾 饰）因为意外，错过了领队马蓝星（马丽饰）
                                   的撤离通知，一个人落在了月球。人类为抵御小行星的撞击，拯救地球，在月球部署了
                                   月盾计划。陨石提前来袭，全员紧急撤离时，维修工
                                   独孤月（沈腾 饰）因为意外，错过了领队马蓝星（马丽饰）
                                   的撤离通知，一个人落在了月球。</p>
                            </div>
                            <a><div className={detailCss.btn}>选座购票</div> </a>  
                        </div>
                        )
                    })
                }
            </div>
            </>
        )
    }
}


export default MovieDetail;